<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angular.js</title>
<script src="../js/angular.min.js"></script>
</head>
<body>
<h2>表单验证</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

	<p>用户姓:<br>
		<input type="text" name="lastName" ng-model="lastName" required>
		<span style="color:red" ng-show="myForm.lastName.$dirty && myForm.lastName.$invalid" placeholder="请输入英文姓">
		<span ng-show="myForm.lastName.$error.required">用户姓是必填项！</span>
		</span>
	</p>
	<p>转为大写的用户姓： {{ lastName | uppercase }}</p>
	<p>转为小写的用户姓： {{ lastName | lowercase }}</p>
	
	<p>用户名:<br>
		<input type="text" name="firstName" ng-model="firstName" required>
		<span style="color:red" ng-show="myForm.firstName.$dirty && myForm.firstName.$invalid" placeholder="请输入英文名">
		<span ng-show="myForm.firstName.$error.required">用户名是必填项！</span>
		</span>
	</p>
	<p>转为大写的用户名字： {{ firstName | uppercase }}</p>
	<p>转为小写的用户名字： {{ firstName | lowercase }}</p>

	<p>邮箱:<br>
		<input type="email" name="email" ng-model="email" required>
		<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
		<span ng-show="myForm.email.$error.required">邮箱是必填项！</span>
		<span ng-show="myForm.email.$error.email">非法的邮箱地址！</span>
		</span>
	</p>

	<p>
		<input type="submit" ng-click="okBtn()" ng-disabled="myForm.user.$dirty && 
		  myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
	</p>
	
	<p ng-show="isShow">
		姓名: {{firstName + " " + lastName}}</br>
		邮箱: {{email}}
	</p>
	
	<div>	
		<h2>敏感词过滤</h2>
		<textarea type="text" ng-model="context" ></textarea>
		<span>{{context | myFilter}}</span>
	</div>
</form>
	
</div>

<script>
	var app = angular.module('myApp', []);
	app.controller('validateCtrl', function($scope) {
        $scope.isShow = false;

    	$scope.firstName = "xiaobing",
        $scope.lastName = "Zhang",
        $scope.email = '18011110000@163.com';
        $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    	}
    	
    	$scope.okBtn = function() {
       		$scope.isShow = true;
    	}
    	
	});
	app.filter("myFilter",function(){
		return function(data){
			//设置敏感词
			var errorMsg = ['草','卧槽','傻逼','操你妈','fuck'];
			
			function filterMethod(checkMsg,errorMsg){
			
				var value = checkMsg;
    			var res = '';
				//遍历敏感词数组
				for(var i=0; i<errorMsg.length; i++){
					//全局替换
					var reg = new RegExp(errorMsg[i],"g");
					//判断内容中是否包括敏感词	
					if (value.indexOf(errorMsg[i]) > -1) {
            			// 将敏感词替换为 **
            			res= value.replace(reg,"**");
            			value = res; 
        			}
				}
				return value;
			}
			if(data){
				return filterMethod(data,errorMsg); 
			}
		}
	});
</script>

</body>

</html>